<template>
  <div class="flex align-center" :style="'height: '+windowHeight+'px;'">
    <!--左侧绝对定位悬浮-->
    <div style="position: absolute;z-index: 999;background-color: #FFFFFF;"
         :style="'height:'+windowHeight+'px;'"
         class="flex flex-column align-center justify-between"
         :class="leftTabBarWidthFlag?'changeLeftTabBarWidth':'recoverLeftTabBarWidth'"
         @mouseenter="changeLeftTabBarWidth"
         @mouseleave="recoverLeftTabBarWidth">
      <div class="flex flex-column">
        <div class="flex flex-column align-center" style="height: 80px;" >
          <span class="icon iconfont icon-shouye" style="font-size: 25px;margin-top: 65px;"></span>
          <span v-show="leftTabBarWidthFlag" style="font-size: 13px;">首页</span>

        </div>
        <div class="flex flex-column align-center" style="height: 80px;">
          <span class="icon iconfont icon-dongtai" style="font-size: 25px;margin-top: 65px;"></span>
          <span v-show="leftTabBarWidthFlag" style="font-size: 13px;">动态</span>
        </div>
        <div class="flex flex-column align-center" style="height: 80px;">
          <span class="icon iconfont icon-xiaoxi" style="font-size: 25px;margin-top: 65px;"></span>
          <span v-show="leftTabBarWidthFlag" style="font-size: 13px;">消息</span>

        </div>
        <div class="flex flex-column align-center" style="height: 80px;">
          <span class="icon iconfont icon-ziyuan" style="font-size: 25px;margin-top: 65px;"></span>
          <span v-show="leftTabBarWidthFlag" style="font-size: 13px;">我的</span>

        </div>
      </div>
      <div class="flex flex-column" style="margin-top: 130px;margin-bottom: 130px;">
        <div class="flex flex-column align-center" style="height: 50px;">
          <span style="font-size: 20px;" class="icon iconfont icon-xiangshang"></span>
        </div>
        <div class="flex flex-column align-center" style="height: 50px;">
          <span style="font-size: 13px;">反馈</span>
        </div>
        <div class="flex flex-column align-center" style="height: 50px;">
          <span style="font-size: 13px;">微信</span>
        </div>
        <div class="flex flex-column align-center" style="height: 50px;">
          <span style="font-size: 13px;">APP</span>
        </div>
      </div>
    </div>
    <!--左侧占位-->
    <!--<div style="width: 45px;" :style="'height: '+windowHeight+'px;'" class="flex flex-column align-center justify-center">-->

    <!--</div>-->
    <!--右-->
    <div style="background-color:red;width: 900px;height: 800px;" class="flex align-center justify-center" :style="'height: '+windowHeight+'px;'">

    </div>
  </div>

</template>

<script>
    export default {
      name: "user",
      data() {
        return {
          current:0,
          listMouseEventBgColor:'background-color: #3A3C42;',
          windowHeight:document.documentElement.clientHeight,
          windowWidth:0,
          leftTabBarWidthFlag: false
        }
      },
      computed:{
        leftTabBarWidthStyles(){

        }
      },
      mounted:function(){
        this.windowHeight = document.documentElement.clientHeight;
        this.windowWidth = document.documentElement.clientWidth;
        // this.chatHeight = this.windowHeight - 20;
        // this.windowHeight = window.innerHeight;
        console.log(this.windowHeight);
        // :style="'height:'+windowHeight+';'"
        //   style="background-color: red;height: 800px;"
      },
      methods:{
        changeLeftTabBarWidth:function(){
          // 'height: '+windowHeight+'px;width:'+leftTabBarWidthFlag?'65px;':'45px;'
          this.leftTabBarWidthFlag = true;
        },
        recoverLeftTabBarWidth:function(){
          this.leftTabBarWidthFlag = false;
        }
      }
    }
</script>

<style scoped>
  .changeLeftTabBarWidth{
    width: 65px;
  }
  .recoverLeftTabBarWidth{
    width: 45px;
  }
</style>
